<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="cancel-box flex-row-center w100">
		<view class="cancel-tips w100">
			<text class="title">账号注销后，以下信息将被清空无法找回：</text>
			<view class="tips-item flex-row-center">
				<text class="icon"></text>
				<text class="text">身份、账号信息、隐私信息、用户权益等</text>
			</view>
			<view class="tips-item flex-row-center">
				<text class="icon"></text>
				<text class="text">交易记录、组队信息、提现记录</text>
			</view>
			<view class="tips-item flex-row-center">
				<text class="icon"></text>
				<text class="text">参加赛事纪录</text>
			</view>
			<text class="tips">请确保所有交易已完结且无纠纷，账号注销后的历史交易可能产生的资金退回权益等将视作自动放弃。</text>
		</view>
		<!-- 注销box -->
		<view class="cancel-content w100">
			<view class="from-item flex-row-center w100 borderB">
				<text class="from-name">手机号：</text>
				<text style="font-size: 26rpx; color: #dedede;">{{userInfo.newMobile}}</text>
			</view>
			<view class="from-item flex-row-center w100">
				<text class="from-name">验证码：</text>
				<up-input border="none" type='number' placeholderClass="placeholderClass" fontSize="26rpx"
					color="#DEDEDE" placeholder="请输入内容" v-model="loginFrom.code">
					<template #suffix>
						<view class="suffix-box flex-center">
							<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
							<view class="getCode-btn flex-center" @click="getCode">
								<text class="text">{{codeTips}}</text>
							</view>
						</view>
					</template></up-input>
			</view>
		</view>
		<!-- 注销按钮 -->
		<view class="from-btn">
			<up-button text="立即注销" shape="circle" :loading="loginFrom.loadingStatus" @click="submitCancel"
				loadingText="正在注销" :customStyle="{
				height:'88rpx',
				fontWeight: 'bold',
				fontSize: '34rpx',
				color: '#0A534F',
			}" color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		$Api
	} from "../../api";
	import {
		userInfoStore
	} from "@/stores/user";
	const {
		userInfo,
		accountInfo,
		setUserInfo,
		setAccountInfo
	} = userInfoStore();
	const codeTips = ref('获取验证码');
	const uCodeRef = ref(null);
	const loginFrom = reactive({
		loadingStatus: false,
		code: '',
		phone: ''
	})
	const submitCancel = async () => { //确定注销
		if (loginFrom.code === '') {
			uni.$u.toast('请输入验证码');
			return
		}
		uni.showLoading({
			title: '注销中'
		});
		loginFrom.loadingStatus = true;
		const res = await $Api.login.cancellation({
			captcha: loginFrom.code
		});
		if (res.code == 1) {
			uni.hideLoading();
			uni.showToast({
				title: '注销成功'
			});
			setTimeout(() => {
				uni.removeStorageSync('user_token');
				setUserInfo(null);
				setAccountInfo(null);
				loginFrom.loadingStatus = false;
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}, 600);
		} else {
			loginFrom.loadingStatus = false;
			uni.$u.toast(res.msg);
		}
	};

	const getCode = async () => { //获取验证码
		if (uCodeRef.value.canGetCode) {
			if (!isValidPhoneNumber(userInfo.mobile)) {
				uni.$u.toast('请填写正确的手机号');
				return
			}
			uni.showLoading({
				title: '正在获取验证码',
			});
			const res = await $Api.login.getCode({
				mobile: userInfo.mobile,
				event: 'destroy'
			});
			if (res.code == 1) {
				setTimeout(() => {
					uni.hideLoading()
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				}, 600);
			} else {
				uni.hideLoading()
				uni.$u.toast(res.msg);
			}

		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	const codeChange = (text) => {
		codeTips.value = text;
	};
</script>
<style>
	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}
</style>
<style lang="scss" scoped>
	.cancel-box {
		flex-direction: column;
		padding: 35rpx;

		.cancel-tips {
			border-radius: 24rpx;
			border: 2rpx solid rgba(105, 187, 176, 1);
			background-color: #222E30;
			padding: 35rpx;

			.title {
				display: block;
				font-size: 32rpx;
				font-weight: 500;
				color: $name-color;
				margin-bottom: 48rpx;
			}

			.tips-item {
				margin-bottom: 24rpx;

				.icon {
					border-radius: 50%;
					width: 12rpx;
					height: 12rpx;
					display: block;
					margin-right: 18rpx;
					background-color: #7EDE9E;
				}

				.text {
					font-size: 28rpx;
					color: $description-color;
				}
			}

			.tips {
				font-size: 28rpx;
				display: block;
				color: $description-color;
				margin-top: 48rpx;
			}
		}

		.cancel-content {
			margin-top: 48rpx;
			background: #283B3C;
			border-radius: 12rpx;
			padding: 0 40rpx;

			.borderB {
				border-bottom: 1rpx solid #4D4D4D;
			}
		}



		.from-item {
			box-sizing: border-box;
			width: 100%;
			width: 100%;
			padding: 24rpx 0;


			.from-name {
				display: block;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-right: 38rpx;
			}

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

		}

		.from-btn {
			width: 75%;
			margin-top: 120rpx;
		}
	}

	.getCode-btn {
		padding-left: 18rpx;
		border-left: 2rpx solid #4D4D4D;
		font-weight: 500;
		font-size: 24rpx;
		color: #66B7AF;

	}
</style>